<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '接单大厅',
  },
}
</route>

<template>
  <wd-navbar title="接单大厅" left-text="" left-arrow @click-left="handleClickLeft"></wd-navbar>
  <view class="wraper">
    <wd-sidebar
      v-model="active"
      custom-style="background-color: transparent !important; width: 7rem;"
      @change="handleChange"
    >
      <wd-sidebar-item
        v-for="(item, index) in categories"
        :key="index"
        :value="index"
        :label="item.label"
        custom-style="font-size: 0.75rem"
      />
    </wd-sidebar>
    <scroll-view
      class="content"
      scroll-y
      scroll-with-animation
      :scroll-top="scrollTop"
      :throttle="false"
      @scroll="onScroll"
    >
      <view v-for="(item, index) in categories" :key="index" class="category">
        <view class="order-item mx-5 mb-4" v-for="(cell, index) in item.items" :key="index">
          <view class="order-item-top flex flex-items-center mb-2">
            <img class="order-item-img" src="@/static/app/custom-icon/avatar4.png" alt="" />
            <view class="flex flex-col ml-2">
              <view class="order-item-title">快递代取</view>
              <view class="order-item-time">距离结束：01:57:00</view>
            </view>
          </view>
          <view class="item-center mt-2">
            <view class="item-center-text flex flex-items-center justify-between">
              <view>快递类型：小件</view>
              <view>快递数量：1个</view>
            </view>
            <view
              style="margin-top: 0.56rem"
              class="item-center-text flex flex-items-center justify-between"
            >
              <view>期望送达：15:25之前</view>
              <view>备注：不限性别</view>
            </view>
            <view class="item-center-content mt-2.5 flex flex-items-center">
              <view class="item-center-content-img" style="background-color: rgba(20, 190, 50, 1)">
                起
              </view>
              <view class="item-center-content-text ml-4" style="color: rgba(20, 190, 50, 1)">
                快递点：菜鸟驿站
              </view>
            </view>
            <view class="item-center-content mt-2.5 flex flex-items-center">
              <view class="item-center-content-img" style="background-color: rgba(82, 133, 250, 1)">
                终
              </view>
              <view class="item-center-content-text ml-4" style="color: rgba(82, 133, 250, 1)">
                宿舍楼-学生宿舍楼1号-323
              </view>
            </view>
          </view>
          <view class="item-bottom flex flex-items-center justify-between">
            <view></view>
            <view class="item-bottom-right flex flex-items-center">
              <view class="item-bottom-right-money mr-2">金额￥2</view>
              <view class="item-bottom-right-jie">接单</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { getRect, isArray } from '@/utils'
const active = ref<number>(1)
const scrollTop = ref<number>(0)
const itemScrollTop = ref<number[]>([])
const subCategories = new Array(4).fill({ title: '标题文字', label: '这是描述这是描述' }, 0, 24)
const categories = ref([
  {
    label: '全部',
    title: '全部',
    items: subCategories,
  },
  {
    label: '08:00-10:00',
    title: '08:00-10:00',
    items: subCategories,
  },
  {
    label: '10:00-12:00',
    title: '10:00-12:00',
    items: subCategories,
  },
  {
    label: '12:00-14:00',
    title: '12:00-14:00',
    items: subCategories,
  },
  {
    label: '14:00-16:00',
    title: '14:00-16:00',
    items: subCategories,
  },
  {
    label: '16:00-18:00',
    title: '16:00-18:00',
    items: subCategories,
  },
  {
    label: '18:00-20:00',
    title: '18:00-20:00',
    items: subCategories,
  },
])

onMounted(() => {
  getRect('.category', true).then((rects) => {
    if (isArray(rects)) {
      itemScrollTop.value = rects.map((item) => item.top || 0)
      scrollTop.value = rects[active.value].top || 0
    }
  })
})
function handleClickLeft() {
  uni.navigateBack()
}
function handleChange({ value }) {
  active.value = value
  scrollTop.value = itemScrollTop.value[value]
}
function onScroll(e) {
  const { scrollTop } = e.detail
  const threshold = 50 // 下一个标题与顶部的距离
  if (scrollTop < threshold) {
    active.value = 0
    return
  }
  const index = itemScrollTop.value.findIndex(
    (top) => top > scrollTop && top - scrollTop <= threshold,
  )
  if (index > -1) {
    active.value = index
  }
}
</script>

<style lang="scss" scoped>
.wraper {
  display: flex;
  height: calc(100vh - 44px);
  background: #fff;
}

.content {
  flex: 1;
  background: #fff;
}

.order-item {
  box-sizing: border-box;
  width: 14.19rem;
  height: 12.19rem;
  padding: 0.69rem 0.5rem 0.81rem 0.38rem;
  background-color: rgba(242, 243, 247, 1);
  border-radius: 1.06rem;
  .order-item-top {
    .order-item-img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
    .order-item-title {
      font-family: SourceHanSansSC-regular;
      font-size: 1.13rem;
      line-height: 1.56rem;
      color: rgba(0, 0, 0, 1);
      text-align: left;
    }
    .order-item-time {
      font-family: SourceHanSansSC-regular;
      font-size: 0.75rem;
      color: rgba(116, 161, 254, 1);
      text-align: left;
    }
  }
}

.item-center {
  .item-center-text {
    font-family: PingFangSC-regular;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 1);
  }
  .item-center-content {
    .item-center-content-img {
      width: 1.25rem;
      height: 1.25rem;
      font-size: 0.5rem;
      line-height: 1.25rem;
      color: #ffffff;
      text-align: center;
      border-radius: 50%;
    }
    .item-center-content-text {
      font-family: PingFangSC-regular;
      font-size: 0.6rem;
      line-height: 0.75rem;

      text-align: left;
    }
  }
}

.item-bottom {
  margin-top: 0.63rem;
  font-size: 0.63rem;
  .item-bottom-left {
    img {
      width: 1.44rem;
      height: 1.44rem;
    }
    text {
      line-height: 0.75rem;
      color: rgba(190, 190, 190, 1);
    }
  }
  .item-bottom-right {
    .item-bottom-right-jie {
      width: 2.75rem;
      height: 1.19rem;
      line-height: 1.19rem;
      color: #fff;
      text-align: center;
      background: linear-gradient(
        91.5deg,
        rgba(102, 220, 255, 1) 4.24%,
        rgba(88, 145, 255, 1) 97.27%
      );
      border-radius: 0.88rem;
    }
    .item-bottom-right-money {
      width: 2.75rem;
      height: 1.19rem;
      margin-left: 0.69rem;
      line-height: 1.19rem;
      color: rgba(82, 133, 250, 1);
      text-align: center;
      border: 0.06rem solid rgba(88, 143, 255, 1);
      border-radius: 0.88rem;
    }
  }
}
</style>
